<template>
	<view>
		<view class="biaoti">
      <!--			请确保姓名与证件一致-->
      拍照识别
      <uni-icons @tap="chooseAndUploadImage" type="camera" size="25" color="#007aff" style="margin-right: 20px;float: right"></uni-icons>
		</view>
		<view class="frombox">
      <view class="fromitem">
<!--        <view class="tit">-->
<!--          证件号码 : 身份证号码-->
<!--        </view>-->
        <view style="display: flex;
				justify-content: space-between;" :class="[inputflag?'input-active':'input']">
          <input type="number" v-model="driverobj.sfcode" placeholder="身份证证件号码"/>
        </view>
        <view class="err" v-if="inputflag">
          请输入正确的驾驶人姓名
        </view>
      </view>
			<view class="fromitem">
<!--				<view class="tit">-->
<!--					中文姓名-->
<!--				</view>-->
				<view :class="[inputflag?'input-active':'input']">
					<input type="text" v-model="driverobj.name" placeholder="中文姓名" />
				</view>
				<view class="err" v-if="inputflag">
					请输入正确的驾驶人姓名
				</view>
			</view>

      <view class="fromitem">
<!--				<view class="tit">-->
<!--					联系手机-->
<!--				</view>-->
				<view :class="[inputflag?'input-active':'input']">
					<input type="text" v-model="driverobj.phone" placeholder="联系手机" />
				</view>
				<view class="err" v-if="inputflag">
					请输入正确的驾驶人姓名
				</view>
			</view>
		</view>
		<view class="db">
			<view class="xieyi" style="line-height: 39upx;">
				<view class="xieyicaozuo" style="display: flex;align-items: center;">
					<checkbox-group @change="selfChangde()">
            <checkbox :value="xieyiflag" :checked="xieyiflag" color="#007aff" style="transform:scale(0.7);"/>
					</checkbox-group>
					<text style="font-weight: 700;">已阅读并同意以下内容:</text>
				</view>
				<view class="xieyitext">
          您已知晓您录入的驾驶员身份证件信息，将用于您预订的租车产品，并在使用时根据有关法律规定进行查验或留存，请确保录入信息真实有效。系统将通过加密等方式保护此信息，并在预订过程中提供给为您实际提供服务的租车公司。如您未开通实名认证，但选择免押服务，您的驾驶员身份证件将被用于实名认证。
				</view>
			</view>
			<button type="primary" style="width: 100%; margin-top: 20upx;" @tap="baocun">保存</button>
		</view>

	</view>
</template>

<script>
import {getwxuserdriver, putwxuserdriver} from '@/utils/new_file.js'
import {sha256} from 'js-sha256';
import {pathToBase64} from 'image-tools';
import {uploadIdCardAppId, uploadIdCardSppSecret} from "@/utils/config";

var appId = 'D0VQ1IFPq53LKKv7';
	var appSecret = 'D0VQ1IFPq53LKKv7qhDaMeDF03FwtPO4'
	var app = getApp()
	export default {
		data() {
			return {
				driverobj: {
					name: '',
					sfcode: '',
					phone: ''
				},
				title: '',
        xieyiflag: true,
				inputflag: false
			};
		},
		onLoad(opt) {
			if (opt.driverobj) {
				console.log(JSON.parse(opt.driverobj));
				this.driverobj = JSON.parse(opt.driverobj)
			}
			this.title = opt.title
			uni.setNavigationBarTitle({
				title: this.title + '驾驶员'
			})
		},
		methods: {
			baocun() {
				if (this.xieyiflag) {
					console.log(this.title);
					if (this.driverobj.name || this.driverobj.phone || this.driverobj.sfcode) {

						let id = uni.getStorageSync('useinfo').id
						this.driverobj.uid = id

						if (this.title == "新增") {
							getwxuserdriver(this.driverobj).then(data => {
								if (data.data.code == 200) {
									uni.navigateBack()
								} else if (data.data.code == 500) {
									app.toastnone(data.data.msg)
								}
							})

						} else {
							putwxuserdriver(this.driverobj).then(data => {
								if (data.data.code == 200) {
									uni.navigateBack()
								} else if (data.data.code == 500) {
									app.toastnone(data.data.msg)
								}
							})

						}
						this.inputflag = false

					} else {
						this.inputflag = true
					}

				} else {
					app.toastnone('请先勾选同意再保存')
				}

			},
			chooseAndUploadImage() {
				// 身份证识别
				let what = this
				let timestamp = Date.now();
				let sign = sha256(uploadIdCardAppId + uploadIdCardSppSecret + timestamp)
				console.log(uploadIdCardAppId, uploadIdCardSppSecret, sign, timestamp);
				uni.chooseImage({
					count: 1, // 选择的图片数量
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						// 图片转化为base64格式
						pathToBase64(tempFilePaths[0]).then(data => {
							console.log(data);
							uni.request({
								header: {
									'Content-Type': 'application/x-www-form-urlencoded'
								},
								url: 'https://api.jumdata.com/ocr/idcard-v1',
								method: 'POST',
								data: {
									appId: uploadIdCardAppId,
									base64: data,
									timestamp: timestamp,
									sign: sign
								},
								success: function(res) {
									what.driverobj.sfcode = res.data.data.info.number
									what.driverobj.name = res.data.data.info.name

									console.log(what.shimingfrom);
								},
								fail(err) {
									console.log(err);
								}
							})
						})


					}
				});
			},
			selfChangde() {
				this.xieyiflag = !this.xieyiflag
			}
		}
	}
</script>

<style lang="less">
	.biaoti,
	.db {
		width: 100%;
		font-size: 32upx;
		padding: 20upx 30upx;
	}

	.frombox {
		padding: 0 30upx;
		background-color: white;

		.fromitem {

			padding: 20upx 0;

			.tit {
				font-size: 24upx;
				color: #333;
				margin-bottom: 10upx;
			}

			.input {
				border-bottom: 1upx solid #ccc;
				padding: 10upx 0;
			}

			.input-active {
				border-bottom: 1upx solid red;
			}

			.err {
				margin-top: 10upx;
				font-size: 20upx;
				color: red;
			}
		}
	}
</style>